.container {
  width: 100%;
  height: 450px;
  background-color: #111;
  position: relative;
  overflow: hidden;

  .scroll {
    width: calc(100% + 400px);
    left: -400px;
    display: flex;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);

    span {
      background-color: #e9c804;
      color: #1d1104;
      font-size: 26px;
      font-family: "SourceHanSansCN-Bold" !important;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      white-space: nowrap;
      animation: move 60s linear infinite;
      animation-delay: -60s;
      &:nth-child(2) {
        animation: move2 60s linear infinite;
        animation-delay: -30s;
      }
    }
    &:nth-of-type(1) {
      transform: rotate(25deg) translateY(180px);
    }
    &:nth-of-type(2) {
      transform: rotate(-20deg) translateY(160px);
    }
    &:nth-of-type(3) {
      transform: rotate(-15deg) translateY(-60px);
    }
    &:nth-of-type(4) {
      transform: rotate(30deg) translateY(250px);
    }
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(transparent, transparent, #0005, #0004);
    z-index: 1000;
    pointer-events: none;
  }

  @keyframes move {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes move2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }
}
